<template>
 <div id="DT">
     <div class="animation">
           <div>
        <Title2>
            <h1>官方榜</h1>
        </Title2>
        <div>
            <RankingList :data="phList,phImg"></RankingList>
            <!-- <RankingList :data="phList"></RankingList>
            <RankingList :data="phList"></RankingList> -->
        </div>
         <div>
            <Title2>
            <h1>全球版</h1>
        </Title2>
            <PhQq :data="listDataPH"></PhQq>
         </div>
    </div>
</div>
</div>   
</template>
<script>
import RankingList from '@/components/slotPh.vue'
import Title2 from '@/components/title2.vue'
import PhQq from '@/components/slotZbdtRecommed.vue'
import {jtRouter} from '../utils/data'
import api from '../utils/api'
import Services from '../utils/Service'
export default {
    data() {
        return {
            phImg:[],
            phList:[
            //     {
            //     pm:1,
            //     promote:'248%',
            //     songRanking:'IF YOU',
            //     singer:'BINBANG',
            //     name2:''
            // },
            // {
            //     pm:8,
            //     promote:'248%',
            //     songRanking:'IF YOU',
            //     singer:'BINBANG',
            //     name2:'(失败者)'
            // }
            ],
            listDataPH:[
                
            //     {
            //         // 2 全球榜 3筛选歌手
            //     // type:'2',
            //     // id:'图片1',
            //     // title:'不惧岁月|想在爱意随风起的时代和你慢慢来',
            //     // index:'',
            //     // popularity:'230万',
            //     // "cover":require('../../public/homeImg/recommGd.jpg'),
            //     // titleH1:'独家放送',
            // }
            
            ]
        }
    },
    components:{
            RankingList,Title2,PhQq
        },
    mounted() {
		// console.log(...jtRouter)
        this.TopList()
        this.detailDt()
	},
    methods: {
          async TopList(){
      let res = await Services(api.TopListDt);
      if(res.status == 200&&res.data.code==200){
         let getData= [...res.data.list]
    for (let index = 0; index < getData.length; index++) {
         if (index<4) {
            // console.log(getData[index])
            this.phImg.push({
                 cover:getData[index].coverImgUrl,
        name:getData[index].name,
        description:getData[index].description,
        updateFrequency:getData[index].updateFrequency,
        id:getData[index].id
            })
        
    }else{
        if(index>=4){
            // console.log(getData[index].name,)
            this.listDataPH.push({
            type:'2',
            cover:getData[index].coverImgUrl,
            id:getData[index].id,
            title:getData[index].name,
            playCount:getData[index].playCount
            })
        }
         
    }
    }
     console.log(this.phImg)
    console.log(this.listDataPH)
      }else{
        console.log(res)
      }
    },
    // 排行榜右边列表
     async detailDt(){
      let res = await Services(api.detailDt);
      if(res.status == 200&&res.data.code==200){
         let getData= [...res.data.list]

    for (let index = 0; index < getData.length; index++) {
         if (index<4) {
            this.phList.push({
                tracks:getData[index].tracks,
                name:getData[index].name,
                updateFrequency:getData[index].updateFrequency,
                id:getData[index].id
            })
        
    }
    }
    console.log(this.phList)
      }else{
        console.log(res)
      }
    },
    },
}
</script>
<style lang="less" scoped>
.animation{
    max-width: 95%;
    // border: solid forestgreen 1px;
    // width: 7.1875rem /* 1380/192 */;
    // width: 1440px;
    margin: 0 auto;
    // position: relative;
    div,span,ul,li,img{
    font-size: 0;
}
 
}
</style>